<!DOCTYPE HTML >
<html>
    <head>
        <title>css的用法</title>
        <meta charset='UTF-8'>
        <style type='text/css'>
            span{ color: crimson;}
        </style>
        <link rel='stylesheet' type='text/css' href='../css/c1.css'>
    </head>
    <body>
        <div class='title'>样式表的用法一</div>
       <div style='text-indent: 20px'>内联样式，也称行内样式，写在标签内的样式，只影响该标签内的元素。适合范围，除&lt;script&gt;外的所有子标签。</div> <br/>
        &lt;自定义标签名 style='属性名称1:属性值1;属性名称2:属性值2;......;'&gt;
        <div class = 'title'>代码示例</div>
        <div class='code'>
        <pre>
             &lt;div style='border:2px solid #22ff70;
        background-color: crimson;
        font-family:"微软雅黑"'&gt;内联样式 &lt;/div&gt;
        </pre>
        </div>
        <div class='title'>效果</div>
        <div style='border:2px solid #22ff70;
        background-color: crimson;
        font-family:"微软雅黑"'>内联样式 </div>
        <hr/>
        <div class='title'>样式表的用法二</div>
       <div style='text-indent:20px'>定义在style标签中，放在head标签中，设置的样式可以影响整个HTML页面。</div> <br/>
        &lt;style&gt;<br/>
            选择器1 {<br/>
                属性名称1:属性值1;<br/>
                属性名称2:属性值2;<br/>
            ......<br/>
            }<br/>
            选择器2 {<br/>
                属性名称a:属性值a;<br/>
                属性名称b:属性值b;<br/>
            ......<br/>
            }<br/>
            ......<br/>
        &lt;/style&gt;<br/>
        <div class='title'>代码示例</div>
        <div class='code'>
        <pre>
        &lt;style type = 'text/css'&gt;
           span {
                color: crimson;
            }
        &lt;/style&gt;
            &lt;span&gt;天气晴朗&lt;/span&gt;
        </pre></div>
        <div class='title'>代码效果</div>
        <div class='result'>
        <span>天气晴朗</span></div>
        <hr/>
        <div class='title'>样式表的用法三</div>
       <div style='text-indent: 20px'> 外部样式,将CSS样式编写并安放在一个独立的.css文件内</div>
        <div class='title'> 代码示例</div>
        <div class='result'>
        <pre>
            &lt;link rel = 'stylesheet' type = 'text/css' href = '../css/c1.css' /&gt;
        </pre></div>
        <div class='title'>效果</div>
    </body>
</html>